<h1>
  <clr-icon
    [attr.shape]="enemy.shape"
    *ngIf="enemy?.shape"
    size="48"
    class="resIcon"
  ></clr-icon>
  {{ enemy?.name }}
</h1>
<div *ngIf="enemy" class="clr-row">
  <div class="clr-col-6">
    <p>
      等级: {{ enemy.level }}
      <br />
      舰队力量:
      <app-formatted-quantity
        [quantity]="enemy.totalFleetPower"
      ></app-formatted-quantity>
    </p>
    <p *ngIf="enemy.bonusCount > 0">
      <span class="label label-info" *ngIf="enemy.moreMetal">更多金属区</span>
      <span class="label label-success" *ngIf="enemy.moreCrystal"
        >更多水晶区</span
      >
      <span class="label label-warning" *ngIf="enemy.moreHabitableSpace"
        >更多建筑空间</span
      >
      <span class="label label-warning" *ngIf="enemy.moreHabitableSpace2"
        >更多建筑空间</span
      >
      <span class="label label-danger" *ngIf="enemy.moreRobot"
        >更多的机器人 c.</span
      >
    </p>
    <p>
      <span class="label label-info"
        >金属区域
        {{ enemy.baseMining }}
      </span>
      <span class="label label-success">水晶区域 {{ enemy.baseCrystal }}</span>
      <span class="label label-warning"
        >建筑空间 {{ enemy.baseHabitable }}</span
      >
      <span class="label label-danger">机器人 c. {{ enemy.baseRobot }}</span>
    </p>
    <br />
    <div class="btn-group btn-primary">
      <button
        class="btn btn-success"
        (click)="attack()"
        [disabled]="ms.game.enemyManager.currentEnemy"
      >
        攻击
      </button>
      <button class="btn" (click)="move(-1)">向上</button>
      <button class="btn" (click)="move(1)">向下</button>
      <button class="btn btn-danger" (click)="deleteModal = true">
        删除
      </button>
    </div>
    <br />
    <br />
    <clr-alert
      [clrAlertType]="'info'"
      *ngIf="ms.game.enemyManager.currentEnemy"
    >
      <clr-alert-item>
        <span class="alert-text">
          你不能攻击 {{ enemy.name }} 因为你已经在和
          <a [routerLink]="'/battle'"
            >{{ ms.game.enemyManager.currentEnemy.name }} </a
          >交战
          <br />
          你可以在
          <a [routerLink]="'/battle'">战斗页面</a> 随时投降和改变敌人
        </span>
      </clr-alert-item>
    </clr-alert>
  </div>
  <div class="clr-col-6">
    <h4>飞船:</h4>
    <app-fleet-table [fleet]="enemy.shipsDesign"></app-fleet-table>
  </div>
</div>

<!-- Delete enemy modal -->
<clr-modal [(clrModalOpen)]="deleteModal">
  <h3 class="modal-title">删除 {{ enemy?.name }}</h3>
  <div class="modal-body">
    <p>这是不能撤消的，确定删除？</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="deleteModal = false">
      取消
    </button>
    <button type="button" class="btn btn-danger" (click)="delete()">
      删除
    </button>
  </div>
</clr-modal>
